/* eslint-disable no-dupe-keys */
<template>
  <div class="taskcontainer">
    <el-radio v-if="btntype" :label="codeindex"
      >{{ codeindex }}<strong>:</strong></el-radio
    >

    <el-checkbox v-else :label="codeindex"
      >{{ codeindex }}<strong>:</strong>
    </el-checkbox>
    <el-input style="width: 240px" v-model="optionitem.title"></el-input>
    <el-upload
      action="#"
      :show-file-list="false"
      :http-request="picUpload"
      list-type="picture-card"
    >
      <img
        @click.stop="previewhandler"
        v-show="optionitem.img && !dialogVisible"
        :src="optionitem.img"
        alt=""
        class="pic"
      />
      <span v-if="!optionitem.img" class="text" @mousedown="csshandler($event)"
        >上传图片</span
      >
      <span v-else class="text" style="color: red">点击边框预览</span>
      <i class="el-icon-circle-close" @click.stop="closehandler"></i>
    </el-upload>
    <el-dialog
      title="图片预览"
      :visible.sync="dialogVisible"
      @close="dialogVisible = false"
    >
      <img width="100%" :src="optionitem.img" alt="" />
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'MiammianOptionarea',
  props: {
    codeindex: {
      type: String,
      required: true
    },
    btntype: {
      type: Boolean,
      default: true
    },
    radiocode: {
      type: String
      // default: ''
    },
    codelist: {
      type: Array,
      default: null
    }
  },
  // props: ['codeindex', 'btntype', 'radiocode', 'codelist'],
  data () {
    return {
      dialogVisible: false,
      optionitem: {
        code: '',
        title: '',
        img: '',
        isRight: false
      }
    }
  },
  watch: {
    radiocode: {
      handler (val) {
        if (val && val === this.optionitem.code) {
          // this.optionitem.code = val
          this.optionitem.isRight = true
        } else {
          this.optionitem.isRight = false
        }
      },
      immediate: true
    },
    codelist: {
      handler (val) {
        if (val && val.includes(this.optionitem.code)) {
          this.optionitem.isRight = true
        } else {
          this.optionitem.isRight = false
        }
      },
      immediate: true,
      deep: true
    }
  },
  created () {
    this.optionitem.code = this.codeindex
  },
  methods: {
    picUpload (res) {
      var COS = require('cos-js-sdk-v5')
      var cos = new COS({
        SecretId: 'AKIDfKkunPkqeBRRAcnjOnvmNhkW1FCsIRJU',
        SecretKey: 'wc190b3IGyPaU83nIYaMtACyUkkW2II3'
      })
      cos.putObject(
        {
          Bucket: 'hnmm-1309207323' /* 必须 */,
          Region: 'ap-nanjing' /* 存储桶所在地域，必须字段 */,
          Key: res.file.name /* 必须 */,
          StorageClass: 'STANDARD',
          Body: res.file // 上传文件对象
          // onProgress: function (progressData) {
          //   console.log(JSON.stringify(progressData))
          // }
        },
        (err, data) => {
          if (data) {
            this.optionitem.img = 'https://' + data.Location
            // this.optionitem.img = this.imageUrl
          } else {
            throw new Error(err.message)
          }
        }
      )
    },
    closehandler () {
      this.optionitem.img = ''
    },
    previewhandler () {
      this.dialogVisible = true
    },
    // preclosehandler () {
    //   if (this.optionitem.isRight && (!this.optionitem.title.trim() && !this.optionitem.img)) {
    //     console.log('不符合')
    //     this.$message.error('请补全正确答案的选项')
    //     throw Promise.reject(new Error('请补全正确答案的选项'))
    //     return false
    //   } else {

    //   }
    // },
    clearcomponent () {
      this.optionitem = {
        code: '',
        title: '',
        img: '',
        isRight: false
      }
    },
    csshandler (e) {
      e.target.style.color = '#409EFF'
    }
  }
}
</script>

<style lang="scss" scoped>
.taskcontainer {
  height: 60px;
  margin-bottom: 20px;
  display: flex;
  justify-content: start;
  align-items: center;
  .el-radio,
  .el-checkbox {
    margin-right: 10px;
  }
  ::v-deep .el-checkbox__input {
    .el-checkbox__inner {
      border-radius: 50%;
    }
  }
  ::v-deep .el-upload--picture-card {
    user-select: none;
    position: relative;
    margin-left: 5px;
    width: 100px;
    height: 60px;
    .el-icon-circle-close {
      position: absolute;
      top: 0;
      right: 0;
      transform: translate(50%, -50%);
      font-size: 18px;
      color: #999;
    }
    span {
      position: absolute;
      line-height: 16px;
      z-index: 2;
      width: 56px;
      height: 16px;
      font-size: 14px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    &:hover {
      color: black;
    }
    img {
      z-index: 10;
      transform: translateY(-14px);
      width: 100px;
      height: 60px;
    }
  }
}
</style>
